<template>
    <div>
         <div class="lu_zfu_title">
             <img src="../assets/zfbtimg.jpg" alt="" class="lu_zfu_title_img">
         </div>
         <div  class="lu_zfu">
             <img src="../assets/zfbtimg02.jpg" alt="" class="lu_zfu_img">
         </div>
          <div class="lu_zfb_hader">
               <div class="lu_zfb_hader_box">
                     <div class="lu_zfb_hader_box_left">1.点击右上角</div>
                            <div class="lu_zfb_hader_box_right">
                                    <img src="../assets/zfbtimg03.jpg" alt="" class="lu_zfb_hader_box_right_img">
                            </div>
               </div>
          </div>

             <div  class="lu_zfb_hader_box_z">
                  <img src="../assets/zfbtimg04.jpg" alt="" class="lu_zfb_hader_box_z_img">
             </div>

             <div class="lu_zfb_hader_box_bottom">
                 <div class="lu_zfb_hader_box_bottom_a">2.在浏览器打开</div>
                 <div class="lu_zfb_hader_box_bottom_b">
                        <img src="../assets/zfbtimg05.jpg" alt="" class="lu_zfb_hader_box_bottom_b_img">
                 </div>
             </div>
    </div>
</template>

<script>
    export default {
        
    }
</script>

<style>
.lu_zfu_img
{
    width: 100%;  
  height: 50px;
}
.lu_zfu_title_img
{
  width: 100%;  
  height: 60px;
}
.lu_zfu_title
{
    width: 40%;
  height: 50px;
  /* border:1px  solid #000;   */
  margin: 50px auto;
}
.lu_zfu
{
  width: 80%;
  height: 60px;
  /* border:1px  solid #000;   */
  margin: 20px auto;
}
.lu_zfb_hader
{
  width: 100%;
  height: 60px;
    /* border-top:1px  solid #000;   */
  margin: 20px auto; 
}
.lu_zfb_hader_box
{
  width: 80%;
  height:70px;
  /* border:1px  solid #000;   */
  margin: 20px auto;
  margin-left:30px;
  border-radius: 5px 5px 5px 5px;  
  background: cornflowerblue;
  display: inline-flex;
  justify-content: space-between;
  align-items: center;
}
.lu_zfb_hader_box_left
{
  color:white;  
}
.lu_zfb_hader_box_right
{
  width: 50px;
  height: 50px;
  /* border:1px solid #000; */
  margin-right: 20px;
  border-radius: 20px 20px 20px 20px;  
}
.lu_zfb_hader_box_right_img
{
 width: 100%;
 height: 50px;   
}
.lu_zfb_hader_box_z
{
 width: 50px;
 height: 50px;
 /* border:1px solid #000; */
 margin: 50px auto; 
}
.lu_zfb_hader_box_z_img
{
  width: 100%;
  height: 100%;   
}
.lu_zfb_hader_box_bottom
{
  width: 80%;
  height: 130px;
  /* border:1px solid #000; */
  border-radius: 5px 5px 5px 5px;
    margin: 10px auto;
  margin-left:30px;
  background: cornflowerblue;
  display: inline-flex;
  justify-content: space-between;
  align-items: center;
}
.lu_zfb_hader_box_bottom_a
{
     color:white;
}
.lu_zfb_hader_box_bottom_b
{
  width: 100px;
  height: 80px;
  /* border:1px solid #000; */
  margin-right: 10px;
}
.lu_zfb_hader_box_bottom_b_img
{
 width: 100%;
 height: 80px;   
}
</style>